<template>
  <div class="about">
    <div
      class="banner"
      :style="{ background: ' url(' + QINIU + 'about_banner.png)' }"
    >
      <div>
        <div class="logo">
          <img :src="QINIU + 'about_logo.png'" />
        </div>
        <div class="banner-title">轻轻的享受音乐</div>
        <div class="banner-content">Enjoy the music gently</div>
      </div>
    </div>
    <div class="about-as">
      <div class="about-as-title"><span>ABOUT ME</span> 关于我们</div>
      <p>我们是一群热爱音乐的人，我们也热爱这个世界；</p>
      <p>我们想追求一种价格与价值的平衡；</p>
      <p>在这个鱼龙混杂的行业，千篇一律的皮囊；</p>
      <p>我们想做一些事情，来引领国产无线耳机行业；</p>
      <p>我们做的这些，只为你能够[轻轻地享受音乐]；</p>
      <p>我们更想，为中国制造走向中国创造，做一点点事情；</p>
    </div>
    <div class="now">
      <div class="now-title">现在我们做到的</div>
      <div class="now-content">Now we can do it</div>
      <div class="pic">
        <div class="pic-item">
          <img :src="QINIU + 'about_icon1.png'" />
        </div>
        <div class="pic-item">
          <img :src="QINIU + 'about_icon2.png'" />
        </div>
      </div>
      <div class="pic">
        <div class="pic-item">
          <img :src="QINIU + 'about_icon3.png'" />
        </div>
        <div class="pic-item">
          <img :src="QINIU + 'about_icon4.png'" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.about {
  padding-top: 1.173333rem;
}
.banner {
  background-size: 100% auto;
  height: 9.333333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0f0f0;
  text-align: center;
  .logo {
    img {
      width: 3.066667rem;
    }
  }
  .banner-title {
    font-size: 0.56rem;
    padding-top: 0.546667rem;
  }
  .banner-content {
    font-size: 0.32rem;
    padding-top: 0.266667rem;
  }
}
.about-as {
  padding: 0.693333rem;
  color: rgb(54, 53, 53);
  .about-as-title {
    font-size: 0.42rem;
    padding: 0.266667rem 0;
    text-align: center;
    span {
      color: #cb1414;
      font-size: 0.6rem;
    }
  }
  p {
    font-size: 0.35rem;
    padding: 0.266667rem 0;
  }
}
.now {
  padding-bottom: 2.066667rem;
  text-align: center;
  .now-title {
    font-size: 0.586667rem;
    color: #cb1414;
  }
  .now-content {
    padding-top: 0.266667rem;
  }
  .pic {
    display: flex;
    padding: 0.266667rem 0.533333rem;
    justify-content: space-around;
    img {
      width: 3.973333rem;
    }
  }
}
</style>
